<template>
  <div class="mid-block1">
    <div class="midtab clearfix">
     
        <div class="videoList">
            <div v-for="(n,index) in getAllAcraftData" style="width:calc(50% - 20px);float:left;height: 350px;margin: 5px;margin-bottom: 50px;">
              <p style="width: 100%;height: 30px;line-height: 30px;background: #000;color: #fff;text-indent: 15px;"> {{n.name?n.name :'空名称'}}</p>
              <video
                :id="'refVideoJsItem'+ index"
                :ref="'refVideoJsItem'+ index"
                class="video-js vjs-default-skin   vjs-big-play-centered"
                controls
                muted
                style="width:100%;height: 100%;"
                preload="auto">
              </video>
            </div>
        </div>
      
      
    </div>
  </div>
</template>

<script>
import flvjs from "flv.js";
import { postHandle } from "@/api";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    newSpaceId: {
      type: String,
    },
  },
  data() {
    return {
      drawer: false,
    	requireFlv:[],
    	getAllAcraftData:[],
      timerCount:null,
      player:null,
      _player :[],
    };
  },
  computed: {
    entSpaceId() {
      return this.$store.getters.entSpaceId;
    },
    spaceId() {
      return this.$store.getters.spaceId;
    },
  },
  watch: {
    newSpaceId(v) {
      if (v) this.getData();
    },
  },
  created() {
    
    this.getData();
  },
  methods: {
    // 请求页面数据 这里根据自己项目情况写
    getData() {
      postHandle("/api/v1/welder-sbtx-second/video-comb/list", {
        d: {
          filters: [
            {
              field: "spaceId",
              operator: "EQUALS",
              value: this.newSpaceId || this.spaceId,
            },
          ],
          sorts: [{ field: "sequence", isDesc: false }],
        },
      }).then((res) => {
        this.getAllAcraftData = res.result || [];
        //   事件循环
        if (this.timerCount) {
          clearTimeout(this.timerCount);
        }
        //this.timerCount = setTimeout(this.getData, 3000);
      });
      this.openLive();
    },
    // flv 直播方法调用
    openLive() {
      const _this = this;
      
      _this.drawer = true;
      _this._player = [];
      async function videoHLSURL() {
        // 暂停重新赋值
        _this.getAllAcraftData.forEach((data, index) => {
          const dom = "refVideoJsItem" + index;
          if (flvjs.isSupported()) {
            var videoElement = document.getElementById(dom);
            var pl = "";
            f();
            function f() {
              pl = creatFlv(videoElement, data.nwurl);
              if (data.nwurl !== "" && data.nwurl !== null) {
                pl.attachMediaElement(videoElement);
                pl.load();
                pl.play();
                console.log("开始播放");
              }
              pl.on(flvjs.Events.ERROR, (errType, errDetail) => {
                console.log("重新连接中...");
                //视频出错后销毁重新创建
                if (pl) {
                  // 销毁
                  if (_this.requireFlv[index]) {
                    clearTimeout(_this.requireFlv[index]);
                  }
                  // 重建
                  _this.requireFlv[index] = setTimeout(() => {
                    _this.destoryVideo(pl);
                    f();
                  }, 3000);
                }
              });
            }

            _this._player.push(pl);
            // 初始化flv
            function creatFlv(videoElement, url) {
              return flvjs.createPlayer(
                {
                  type: "flv",
                  isLive: true,
                  //fluid: true,
                  stashInitialSize: 128, // 减少首桢显示等待时长
                  url: url,
                },
                {
                  enableWorker: false, //不启用分离线程
                  enableStashBuffer: true, //关闭IO隐藏缓冲区
                  reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
                  autoCleanupSourceBuffer: true, //自动清除缓存
                }
              );
            }
          }
        });
      }
      setTimeout(videoHLSURL, 300);
    },

//     flvPlayer.play().catch((e)=>{
//    /* error handler */
// })
    // 视频源定向销毁
    destoryVideo(pl) {
      pl.pause();
      pl.unload();
      pl.detachMediaElement();
      pl.destroy();
      pl = null;
    },
    // 视频源全局销毁
    destoryVideoAll() {
      if (this._player) {
        this._player.forEach((data, i) => {
          this.destoryVideo(this._player[i]);
        });
      }
    },
    // 断线重连销毁-关闭弹窗调用
    drawClosed() {
      this.clearFlv();
    },
    //断线重连销毁方法
    clearFlv() {
      if (this.requireFlv.length > 0) {
        this.requireFlv.forEach((data, index) => {
          if (this.requireFlv[index]) {
            clearTimeout(this.requireFlv[index]);
          }
        });
        this.requireFlv = [];
      }
    },
    beforeDestroy() {
      if (this.timerCount) {
        clearTimeout(this.timerCount); //关闭
      }
      if (this._player) {
        this.destoryVideoAll();
      }
      // 销毁
      this.clearFlv();
    },
  },
};
</script>
<style>
.videoList{
    padding:0 20px;
    height: 500px;
    overflow-y: scroll;
  }
</style>
